<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.name" placeholder="姓名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getUser">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
			<el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;">
				<el-table-column type="index" width="60">
				</el-table-column>
				<el-table-column prop="username" label="姓名" width="120" >
				</el-table-column>
				<el-table-column prop="age" label="年龄" width="100" >
				</el-table-column>
				<el-table-column prop="phone" label="电话" width="120" >
				</el-table-column>
				<el-table-column prop="addr" label="邮箱" min-width="180" >
				</el-table-column>
			</el-table>
      <el-col :span="24" class="toolbar">
        <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize"
                       :current-page="currentPage" :total="totals" style="float:right;">
        </el-pagination>
      </el-col>

	</section>
</template>
<script>
	export default {
		data() {
			return {
        currentPage: 1,
        pageSize: 5,
        totals: 22,
        users: [],
        filters: {
					name: ''
				},
        listLoading: false,
        sels: []
			}
		},
		methods: {
			//获取用户列表
			getUser: function () {
				let users={
          pageSize: this.pageSize ,
          currentPage: this.currentPage,
        };
        this.listLoading=true;
        this.$http.get("/emp",users).then(res=>
        {
          console.log(res)
          this.users=res.data;
          this.totals=res.data.totals;
          this.listLoading=false;
        }).catch(
            res=>{
              this.$message.error("系统反码")
            }
        )},
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getUser();
      },
		},
		mounted() {
			this.getUser();
		}
	};

</script>

<style scoped>

</style>